import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css'
import Result from './result';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      left: [
        { id: 1, title: 'SmartIDE1' },
        { id: 2, title: 'SmartIDE2' },
        { id: 3, title: 'SmartIDE3' },
        { id: 4, title: 'SmartIDE4' },
        { id: 5, title: 'SmartIDE5' },
        { id: 6, title: 'SmartIDE6' },
      ],
      right: [],
      result: []
    };
  }
  handlePush = (target) => {
    var origin = target === 'right' ? 'left' : 'right';
    var selected = this.state[origin].filter(item => item.active);
    if (selected.length === 0) return;
    var originData = this.state[origin].filter(item => !item.active);
    selected.forEach(item => item.active = false);
    this.setState(state => {
      var data = {};
      data[origin] = originData;
      data[target] = state[target].concat(selected);
      return data;
    })
  }
  handleSelectItem = (id, key) => {
    const source = this.state[key];
    var index = source.findIndex(item => item.id === id);
    source[index].active = source[index].active ? false : true;
    this.setState(state => {
      return { key: source }
    })
  }
  handleSubmit = () => {
    this.setState(state => {
      return { result: state.right }
    })
  }
  renderResult = () => {
    if (this.state.result.length === 0) return '';
    return (
      <span>Hello 潘文波</span>
    )
  }
  render() {
    return (
      <div className="App">
        <div className="cus-panel col-xs-12 col-sm-12 col-md-5">
          <div className='ct col-xs-12'>
            <ul>
              {this.state.left.map(item => {
                return <li className={item.active ? 'active' : ''} onClick={this.handleSelectItem.bind(this, item.id, 'left')} key={item.id}>{item.title}</li>
              })}
            </ul>
          </div>
        </div>
        <div className="operation-panel col-xs-12 col-sm-12 col-md-2">
          <div>
            <div className='ct col-xs-12'>
              <div>
                <input onClick={this.handlePush.bind(this, 'right')} className='option-btn' type="button" value=">>>" />
              </div>
              <div>
                <input onClick={this.handlePush.bind(this, 'left')} className='option-btn' type="button" value="<<<" />
              </div>
              <div>
                <input onClick={this.handleSubmit} className='option-btn' type="button" value="OK" />
              </div>
            </div>
          </div>
        </div>
        <div className="cus-panel col-xs-12 col-sm-12 col-md-5">
          <div className='ct col-xs-12'>
            <ul>
              {this.state.right.map(item => {
                return <li className={item.active ? 'active' : ''} onClick={this.handleSelectItem.bind(this, item.id, 'right')} key={item.id}>{item.title}</li>
              })}
            </ul>
          </div>
        </div>
        <div className='clearfix'></div>
        <div className='mail-panel'>
          <div className='ct'>
          {this.state.result.length === 0 ? '' : <Result list={this.state.result}></Result>}
          </div>
        </div>
      </div>
    );
  }
}

export default App;
